<template>
    <div class="vo-drag-position">
        <!-- <VoDragPositionMaterials></VoDragPositionMaterials> -->
       <VoDragPositionTree :data="positions" @node-click="handleNodeClick" @node-remove="handleNodeRemove"></VoDragPositionTree>
        <div ref="editor" id="editor" class="vo-drag-position-editor" @click.stop="handleCanvasClick">
            <VoDragPositionGrid></VoDragPositionGrid>
            <VoDragPositionMoveItems
                :canvasWidth="options.canvasWidth"
                :canvasHeight="options.canvasHeight"
                :items="positions"
                :currentItem="currentItem"
                @on-item-click="handleItemClick"
                @on-fixed-position="handleFixedPosition">
            </VoDragPositionMoveItems>
            <!-- <VoDragPositionGuidelines v-if="currentItem" :currentItem="currentItem" :linesOption="linesOption"></VoDragPositionGuidelines> -->
        </div>
       <!-- <VoDragPositionItemEdit :currentItem="currentItem"></VoDragPositionItemEdit> -->
    </div>
</template>

<script>
import VoDragPositionMoveItems from './MoveItems'
import VoDragPositionGrid from './components/Grid.vue'
import VoDragPositionMaterials from './Materials.vue'
import VoDragPositionItemEdit from './DragItemEdit.vue'
import VoDragPositionGuidelines from './components/GuideLines.vue'
import VoDragPositionTree from './DragTree.vue'

export default {
    name: 'VoDragPositionMove',
    components: {
        VoDragPositionMoveItems,
        VoDragPositionGrid,
        // VoDragPositionMaterials,
        // VoDragPositionItemEdit,
        // VoDragPositionGuidelines,
        VoDragPositionTree
    },
    data() {
        return {
            options: {
                canvasWidth: 1000,
                canvasHeight: 800
            },
            linesOption: {
                top: 0,
                left: 0
            },
            positions: [
                {
                    id: '1',
                    name: '动物室1',
                    width: 200,
                    height: 200,
                    top: 0,
                    left: 0,
                    overstep: false,
                    minResizeWidth: 100,
                    minResizeHeight: 100,
                    maxResizeWidth: 400,
                    maxResizeHeight: 400,
                    children: [
                        {
                            id: '1-1',
                            name: '动物室1-1',
                            width: 100,
                            height: 100,
                            top: 20,
                            left: 20,
                            overstep: true,
                            minResizeWidth: 100,
                            minResizeHeight: 100,
                            maxResizeWidth: 200,
                            maxResizeHeight: 200,
                            children: []
                        }
                    ]
                }, {
                    id: '2',
                    name: '动物室2',
                    width: 200,
                    height: 200,
                    top: 250,
                    left: 250,
                    overstep: true,
                    minResizeWidth: 100,
                    minResizeHeight: 100,
                    maxResizeWidth: 400,
                    maxResizeHeight: 400,
                    children: [
                        {
                            id: '2-1',
                            name: '动物室2-1',
                            width: 100,
                            height: 100,
                            top: 20,
                            left: 20,
                            overstep: true,
                            minResizeWidth: 100,
                            minResizeHeight: 100,
                            maxResizeWidth: 200,
                            maxResizeHeight: 200,
                            children: []
                        }
                    ]
                }
            ],
            currentItem: null,
            currentMove: null
        }
    },
    methods: {
        // tree 节点点击
        handleNodeClick(e) {
            this.currentItem = e
        },
        // tree 节点移除
        handleNodeRemove(e) {
            console.log('delete', e);
        },
        // 画布点击
        handleCanvasClick() {
            this.currentItem = null
        },
        // item点击
        handleItemClick(item) {
            this.currentItem = item
        },
        // 更新辅助线位置信息
        handleFixedPosition(item) {
            this.linesOption.top = item.top || this.linesOption.top;
            this.linesOption.left = item.left || this.linesOption.left;
        }
    }
}
</script>

<style lang="scss" scoped>
.vo-drag-position{
    display: flex;
    .vo-drag-position-editor{
        position: relative;
        display: block;
        width: 1000px;
        min-width: 1000px;
        height: 800px;
        min-height: 800px;
        border: 1px solid #ccc;
        background: #F2F6FC;
        overflow: hidden;
        .vo-drag-position_draggable{
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    }
}
/deep/.move-into{
    background: skyblue;
}
</style>
